import * as React from "react";
import { observer } from 'mobx-react';
import style from './style.less';


interface Props {
  item: {
    id: string;
    img: string;
    title: string;
    price: number;
    count: number;
    limit: number;
  };
  value: number;
  sell:()=>void;
  buy:()=>void;
  onChange:(e) => void;
  sellDisable:()=>boolean;
  buyDisable:()=> boolean;
}
@observer
export default class GoodsItem extends React.Component<Props> {

  //设置sell的禁用

  render() {
    return (
      <div className={style.container}>
        <div className={style.img}>
          <img src={`http://127.0.0.1:3000${this.props.item.img}`} />
        </div>
        <div className={style.title}>{this.props.item.title}</div>
        <div className={style.price}>${this.props.item.price}</div>
        <div className={style.action}>
          <button className={style.sell} disabled={this.props.sellDisable()} onClick={this.props.sell}>
            Sell
          </button>
          <input
            className={style.count}
            type="text"
            value={this.props.item.count}
            required={true}
            onChange={(e) => {
                this.props.onChange(e)
            }}
          />
          <button className={style.buy} disabled={this.props.buyDisable()} onClick={this.props.buy}>
            Buy
          </button>
        </div>
      </div>
    );
  }
}
